<template>
	<view class="h-fill">
		<view v-if="list.length">
			<view class="t-pad b-pad uni-flex align-center">
				<view class="uni-flex-extend">
					<u-line></u-line>
				</view>
				<text class="l-mg r-mg uni-text-gray" style="color: #FE8917;">全部商家</text>
				<view class="uni-flex-extend">
					<u-line></u-line>
				</view>
			</view>
			<view v-for="(item, index) in list" :key="item.id" class="list-item uni-flex uni-column round-corner">
				<view @click="navToDetail(index)" class="uni-flex align-center pad">
					<u-lazy-load :borderRadius="20" class="list-item-logo" loading-img="/static/easy-loadimage/loading.gif"
						error-img="/static/easy-loadimage/loadfail.png" 
						:image="item.photos[0] || $getCloudStorageUrl('/logo.jpg')" :height="160" img-mode="aspectFill"></u-lazy-load>
					<view class="uni-flex-extend uni-ellipsis">
						<view class="uni-flex align-center">
							<text class="list-item-title uni-flex-extend uni-ellipsis">{{item.name}}</text>
							<u-tag v-if="item.category" :text="item.category" shape="circle"
								bgColor="rgba(9, 129, 255, 0.2)" :color="item.color || '#7C6CEE'" borderColor="rgba(9, 129, 255, 0.2)"></u-tag>
						</view>
						<view class="uni-flex align-center uni-text-gray" style="padding: 6rpx 0;">
							<image class="list-item-img" mode="aspectFit" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dingwei_juli@2x.png"></image>
							<text v-if="item.distance" class="list-item-distance">{{item.distanceDes}}</text>
							<view class="list-item-seprator" v-if="item.distance && item.address"></view>
							<text class="uni-flex-extend uni-ellipsis" v-if="item.address">{{item.address}}</text>
						</view>
						<view class="uni-flex align-center">
							<view class="uni-flex align-center uni-flex-extend">
								<image @click.stop="navToLocation(index)" class="list-item-act" mode="aspectFit" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dingwei@2x.png"></image>
								<image v-if="item.phone" @click.stop="makePhoneCall(index)" mode="aspectFit" class="list-item-act" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_dianhua@2x.png"></image>
							</view>
							<text class="uni-text-gray">服务次数：{{item.remainTimes || 0}}/{{item.serviceTimes || 0}}</text>
						</view>
					</view>
				</view>
				<u-line></u-line>
				<view class="pad uni-flex align-center">
					<image class="text-icon" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_liwu@2x.png" mode="aspectFit"></image>
					<view class="uni-flex-extend uni-ellipsis" style="color: #D89D4D;">{{item.serviceContent}}</view>
				</view>
			</view>
			<uni-load-more :status="loadingStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex";
	import {getColor} from "../../common/colorUtil.js";
	import {
		getServiceList
	} from "../../api/platform/store.js"
	export default {
		name: "service-list",
		data() {
			return {
				list: [],
				pageNum: 0,
				loadingStatus: 'noMore',
				userLocation: null,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				}
			}
		},
		props: {
			level: {
				type: Number,
				default: -1
			},
			loadRemainTimes: {
				type: Boolean,
				default: true
			},
			categoryId: {
				type: Number,
				default: -1
			},
			keywords: {
				type: String,
				default: ""
			},
			excludeRecommendRecords: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		watch: {
			level(newVal) {
				this.reload();
			},
			categoryId(newVal) {
				this.reload();
			},
			keywords(newVal) {
				if (newVal) {
					this.reload();
				} else {
					this.initData();
				}
			}
		},
		created() {
		},
		methods: {
			navToDetail(idx) {
				this.$emit("itemClick", this.list[idx])
			},
			navToLocation(idx) {
				let item = this.list[idx]
				uni.openLocation({
					latitude: item.location.coordinates[1],
					longitude: item.location.coordinates[0],
					address: item.address || '',
					success: (res) => {
						this.$log("打开地图查看位置成功", res);
					},
					fail: (err) => {
						this.$log("打开地图查看位置失败", err);
					}
				})
			},
			makePhoneCall(idx) {
				let item = this.list[idx]
				// #ifndef H5
				uni.makePhoneCall({
					phoneNumber: item.phone,
				})
				// #endif
			},
			formatDistance(meters) {
				if (meters < 1000) {
					return `${Math.floor(meters)}m`;
				} else {
					return `${Math.floor(meters / 1000)}km`;
				}
			},
			getUserLocation() {
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: "gcj02",
						success: (res) => {
							resolve({
								latitude: res.latitude,
								longitude: res.longitude
							});
						},
						fail: (err) => {
							resolve();
						}
					})
				});
			},
			initData() {
				this.list = [];
				this.pageNum = 0;
				this.loadingStatus = "noMore";
			},
			async reload() {
				if (this.loadingStatus == "loading") {
					return;
				}
				this.initData();
				this.loadingStatus = "more";
				//#ifndef H5
				this.userLocation = await this.getUserLocation();
				//#endif
				await this.loadMore();
			},
			async loadMore() {
				if (this.loadingStatus === "loading" || this.loadingStatus === "noMore") {
					return;
				}
				let prevStatus = this.loadingStatus;
				this.loadingStatus = "loading";
				var query = {
					city: uni.getStorageSync('currentRegion').city.value,
					pageNum: this.pageNum + 1,
					pageSize: 9999
				}
				if (this.level > 0) {
					query.level = this.level;
				}
				if (this.categoryId > 0) {
					query.categoryId = this.categoryId;
				}
				if (this.userLocation) {
					query.userLocation = this.userLocation
				}
				if (this.keywords) {
					query.keyword = this.keywords;
				}
				query.excludeRecommendRecords = this.excludeRecommendRecords;
				if (this.excludeRecommendRecords) {
					query.action = 'allExceptRecommend'
				} else {
					query.action = 'all'
				}
				try{
					let list = await getServiceList(query)
					list.forEach(item => {
						item.color = getColor(item.category);
						if (item.distance != null) {
							item.distanceDes = this.formatDistance(item.distance);
						}
					});
					this.list = list
					this.loadingStatus = 'nomore'
				}catch(e){
					this.loadingStatus = prevStatus;
				}
			}
		}
	}
</script>

<style lang="scss">
	.list-item {
		background-color: #FFFFFF;
		&-logo {
			width: 210rpx;
			height: 160rpx;
			margin-right: 20rpx;
		}
		&-title {
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 20rpx;
		}
		&-times {
			font-size: 24rpx;
			color: #656565;
		}
		&-distance {
			font-size: 24rpx;
		}
		&-seprator {
			width: 1px;
			height: 20rpx;
			background-color: #999999;
			margin: 0 10rpx;
		}
		&-area {
			font-size: 24rpx;
		}
		&-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
		&-act {
			width: 46rpx;
			height: 46rpx
		}
		&-act:not(:last-child) {
			margin-right: 40rpx;
		}
		&-content {
			color: #353535;
			font-size: 22rpx;
			color: #ff8163;
			font-weight: bold;
			max-width: 280rpx;
		}
		&-line {
			height: 1rpx;
			background-color: #DDDDDD;
		}
		&-reason {
			color: #666666;
		}
		&-imgs {
			white-space: nowrap;
			height: 160rpx;
			&-img {
				display: inline-block;
				width: 210rpx;
				height: 160rpx;
			}
			&-img:not(:last-child) {
				margin-right: 4rpx;
			}
		}
	}
	.list-item:not(:last-child) {
		margin-bottom: 20rpx;
	}
</style>
